<template>
<a-layout class="layout-demo">
    <a-layout-sider
    hide-trigger
    collapsible
    :collapsed="collapsed"
    >
        <div class="logo" >
            <img :src="logo" style="width: 32px;height: 32px;" alt="">
            <div v-if="!collapsed">{{ title }}</div>
        </div>
        <!-- 动态菜单 -->
        <a-menu
            :defaultOpenKeys="['1']"
            :defaultSelectedKeys="['0_1']"
            style="width: 100%;"
        >
            <a-menu-item v-for="(res,index) in navList" @click="onClickMenuItem(res)" :key="index" >
                <component :is="res.icon" />
                {{res.name}}
            </a-menu-item>
        </a-menu>
    </a-layout-sider>
    <!-- 右侧内容 -->
    <a-layout>
        <a-layout-header style="padding-left: 20px;">
            <a-button shape="round" @click="onCollapse">
                <IconCaretRight v-if="collapsed" />
                <IconCaretLeft v-else />
            </a-button>
            
            <!-- 头像以及退出登录 -->
            <a-avatar style="margin-right: 20px;">A</a-avatar>
        </a-layout-header>
        
        <a-layout style="padding: 0 24px;">
            <!-- 控制导航栏路径 -->
            <a-breadcrumb style="margin: 10px 0 ;">
                <a-breadcrumb-item>{{breadcrumb}}</a-breadcrumb-item>
            </a-breadcrumb>

            <!-- 路由出口 -->
            <a-layout-content style="color: black;">
                <router-view />
            </a-layout-content>

            <a-layout-footer style="color: black;">
                
            </a-layout-footer>
        </a-layout>
    </a-layout>
</a-layout>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { navConfig } from '../config/nav.config';

// 获取系统信息
const title = import.meta.env.VITE_BASE_TITLE
const logo = import.meta.env.VITE_BASE_LOGO

// 控制左侧菜单栏的收缩
const collapsed = ref(false);
const onCollapse = () => {
    collapsed.value = !collapsed.value;
}

// 动态路由
const navList = ref(navConfig);

// 切换路由
const router = useRouter()
const breadcrumb = ref('工作台')
const onClickMenuItem = (item) => {
    router.push(`/base${item.path}`)
    breadcrumb.value = item.name
}

onMounted(() => {
    router.push('/base/home')
})
</script>
<style scoped>
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.layout-demo {
    height: 100vh;
    background: var(--color-fill-2);
    border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
    height: 32px;
    margin: 12px 8px;
    background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo{
    /* background: var(--color-fill-2); */
    background-color: white;
}
/* 选中颜色 */
/*.layout-demo :deep(.arco-menu-item.arco-menu-selected) {
    background-color: red;
} */
.layout-demo :deep(.arco-layout-header)  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
    height: 48px;
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    /* background: var(--color-bg-3); */
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content)  {

    color: var(--color-white);
    font-size: 16px;
    font-stretch: condensed;
    text-align: center;
}
</style>
